<template>
  <div class="select-type">
    <div v-for="item in skuAttributes" :key="item.code" class="comm-size">
      <span class="label">
        {{ item.name }}
        <span class="select-name">[{{ selectedValues[item.name] }}]</span>
      </span>
      <div class="size-list">
        <Tooltip v-for="infoItem in item.list" :key="infoItem.enumValue" :content="infoItem.enumValue" placement="top"
          transfer>
          <div class="size-item" :class="{ 'active': isSelected(item.name, infoItem.enumValue) }"
            @click="selectAttribute(item.name, infoItem.enumValue, infoItem)">
            <template v-if="infoItem.enumImageUrl">
              <div class="goods-image" :class="{ 'active': isSelected(item.name, infoItem.enumValue) }">
                <img :src="infoItem.enumImageUrl">
              </div>
            </template>
            <template v-else>
              <div class="goods-text" :class="{ 'active': isSelected(item.name, infoItem.enumValue) }">
                {{ infoItem.enumValue }}
              </div>
            </template>
          </div>
        </Tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import { Tooltip } from 'view-design'

export default {
  name: 'commodity-specification',
  components: {
    Tooltip
  },
  props: {
    info: Object
  },
  data() {
    return {
      selectedValues: {}, // 用户选中的属性值
      skus: [], // 从数据源填充的SKU列表
      selectedAttributes: {}, // 用户选中的属性
      skuAttributes: [], // SKU属性及其值的列表
      selectedProductDetails: null // 选中的SKU详细信息
    };
  },
  mounted() {
    this.processSkus(this.info);
  },
  methods: {
    processSkus(data) {
      // 处理原始SKU数据并生成属性列表
      if (data.skuVoList.length > 0) {
        data.skuVoList.forEach(sku => {
          const attributes = {};
          sku.skuAttr.forEach(attr => {
            attributes[attr.name] = attr.enumValue;
            if (!this.skuAttributes.find(a => a.name === attr.name)) {
              this.skuAttributes.push({
                name: attr.name, // 商品名称
                code: attr.code, // 商品编号
                list: []
              });
            }
            const attribute = this.skuAttributes.find(a => a.name === attr.name);
            if (!attribute.list.find(l => l.enumValue === attr.enumValue)) {
              attribute.list.push({ enumValue: attr.enumValue, enumImageUrl: attr.enumImageUrl });
            }
          });
          this.skus.push({
            skuNo: sku.skuNo,
            spuNo: sku.spuNo,
            attributes,
            image: sku.skuAttr.find(attr => attr.enumImageUrl)?.enumImageUrl || '',
            stock: sku.stock,
            price: sku.price,
            priceCNY: sku.priceCNY,
            originalPriceCNY: sku.originalPriceCNY || 0,
            originalPrice: sku.originalPrice || 0
          });
        });
        // 处理完成后默认选中第一个选项
        if (this.skuAttributes.length > 0) {
          this.skuAttributes.forEach(item => {
            if (item.list && item.list.length > 0) {
              const firstInfoItem = item.list[0];
              this.selectAttribute(item.name, firstInfoItem.enumValue, firstInfoItem);
            }
          })
        }
      }
    },
    selectAttribute(name, value, infoItem) {
      this.selectedAttributes = { ...this.selectedAttributes, [name]: value };
      this.selectedValues = { ...this.selectedValues, [name]: infoItem.enumValue }; // 保留更新逻辑但不显示
      if (this.allAttributesSelected()) {
        this.updateSelectedProductDetails();
      }
    },
    updateSelectedProductDetails() {
      const selectedProduct = this.skus.find(sku => {
        return Object.entries(this.selectedAttributes).every(([key, val]) => sku.attributes[key] === val);
      });
      if (selectedProduct) {
        this.selectedProductDetails = {
          ...selectedProduct,
          attributes: this.selectedAttributes
        };
        this.$emit('on-change', this.selectedProductDetails);
      }
    },
    isSelected(name, value) {
      return this.selectedAttributes[name] === value;
    },
    allAttributesSelected() {
      // 检查是否所有属性都已选择
      const allAttributes = this.skuAttributes.map(attr => attr.name);
      return allAttributes.every(attr => this.selectedAttributes[attr]);
    }
  }
};
</script>

<style scoped lang="less">
.select-type {
  .comm-size {
    .label {
      display: block;
      margin-right: 6px;
      margin-bottom: 6px;
      font-family: PingFang HK, PingFang HK;
      font-size: 14px;
      color: #969696;
      line-height: 25px;
      margin-bottom: 16px;
      margin-top: 16px;

      .select-name {
        color: #2F333A;
        margin-left: 8px;
      }
    }

    .size-list {
      display: block;
      overflow: hidden;

      .size-item {
        float: left; // 添加浮动以确保Tooltip正确包裹
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;

        .goods-image {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 72px;
          height: 72px;
          opacity: 1;
          border-radius: 8px;
          border: 1px solid #F1F1F1;
          overflow: hidden;
          object-fit: cover;
          padding: 5px;

          img {
            width: 100%;
            border-radius: 4px;
          }
        }

        .goods-text {
          padding: 4px 12px;
          background: #FFFFFF;
          border-radius: 2px;
          opacity: 1;
          border: 1px solid #DCDEE2;
          color: @t-title-color;
          font-size: 14px;
          font-weight: 400;
        }

        .active {
          border: 1px solid #FF186B;
          color: #FF186B;
        }
      }
    }
  }
}
</style>